<!doctype html>
<html dir="ltr" lang="en">
<head>
  <meta charset="utf-8">
  <title>IndexedDB</title>
  <link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
  <link rel="stylesheet" href="indexeddb_internals.css">
</head>
<body>
    <!-- templates -->
    <div style="display:none">
        <div id="indexeddb-list-template"
             jsvalues="$partition_path:$this.partition_path">
            <div class="indexeddb-summary">
                <span jsdisplay="$this.partition_path">
                    <span>Instances in: </span>
                    <span jscontent="$this.partition_path"></span>
                </span>
                <span jsdisplay="!$this.partition_path">
                    <span>Instances: Incognito </span>
                </span>
                <span jscontent="'(' + $this.idbs.length + ')'"></span>
            </div>
            <div class="indexeddb-item" jsselect="$this.idbs">
                <a class="indexeddb-url" jscontent="url" jsvalues="href:url"
                   target="_blank"></a>
                <div class="indexeddb-size">
                    <span>Size:</span>
                    <span jscontent="size"></span>
                </div>
                <div class="indexeddb-last-modified">
                    <span>Last modified:</span>
                    <span jscontent="new Date(last_modified)"></span>
                </div>
                <div>
                    <span>Open connections:</span>
                    <span class="connection-count"
                          jsvalues=".idb_origin_url:url;.idb_partition_path:$partition_path"
                          jscontent="connection_count">
                </div>
                <div class="indexeddb-paths">
                    <span>Paths:</span>
                    <span class="indexeddb-path" jscontent="$this" jsselect="$this.paths"></span>
                </div>
                <div class="controls">
                    <a href="#" class="force-close"
                       jsvalues=".idb_origin_url:url;.idb_partition_path:$partition_path">Force close</a>
                    <a href="#" class="download"
                       jsvalues=".idb_origin_url:url;.idb_partition_path:$partition_path">Download</a>
                    <a href="https://crbug.com/829141"
                       target="_blank">?</a>
                    <span class="download-status" style="display: none">Loading...</span>
                </div>
                <div class="indexeddb-database" jsselect="$this.databases">

                  <span>Open database:</span>
                  <span jscontent="name"></span>

                  <div>
                    <span>Connections:</span>

                    <span class="indexeddb-connection-count"
                          jsdisplay="connection_count">
                      <span>open:</span>
                      <span jscontent="connection_count"></span>
                    </span>

                    <span class="indexeddb-connection-count pending"
                          jsdisplay="active_open_delete">
                      <span>active opens/deletes:</span>
                      <span jscontent="active_open_delete"></span>
                    </span>

                    <span class="indexeddb-connection-count pending"
                          jsdisplay="pending_open_delete">
                      <span>pending opens/deletes:</span>
                      <span jscontent="pending_open_delete"></span>
                    </span>

                  </div>
                  <div jsdisplay="$this.transactions &amp;&amp;
                                  $this.transactions.length">
                    <span>Transactions:</span>

                    <table class="indexeddb-transaction-list">
                      <tbody>
                        <tr>
                          <th title="Process ID of the tab or SharedWorker that created the transaction">
                            Process ID
                          </th>
                          <th title="Transaction ID (unique within Process)">
                            ID
                          </th>
                          <th title="Type of transaction">
                            Mode
                          </th>
                          <th title="Names of object stores used by the transaction">
                            Scope
                          </th>
                          <th title="Number of requests that have been executed">
                            Completed Requests
                          </th>
                          <th title="Number of requests that have not yet been executed">
                            Pending Requests
                          </th>
                          <th title="Time since transaction creation">
                            Age (ms)
                          </th>
                          <th title="Time since transaction started">
                            Runtime (ms)
                          </th>
                          <th title="Status in the transaction queue">
                            Status
                          </th>
                        </tr>
                        <tr class="indexeddb-transaction"
                            jsselect="$this.transactions"
                            jseval="this.classList.add($this.status)">

                          <td class="indexeddb-transaction-pid"
                              jscontent="pid">
                          </td>

                          <td class="indexeddb-transaction-tid"
                              jscontent="tid">
                          </td>

                          <td class="indexeddb-transaction-mode"
                              jscontent="mode">
                          </td>

                          <td class="indexeddb-transaction-scope"
                              jscontent="'[ ' + scope.join(', ') + ' ]'">
                          </td>

                          <td class="indexeddb-transaction-requests-complete"
                              jscontent="tasks_completed">
                          </td>

                          <td class="indexeddb-transaction-requests-pending"
                              jscontent="tasks_scheduled - tasks_completed">
                          </td>

                          <td class="indexeddb-transaction-age"
                              jscontent="Math.round(age)">
                          </td>

                          <td class="indexeddb-transaction-age">
                            <span jsdisplay="status == 'started' || status == 'running' || status == 'committing'"
                                  jscontent="Math.round(runtime)">
                            </span>
                          </td>

                          <td class="indexeddb-transaction-state"
                              jscontent="status">
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
            </div>
        </div>
    </div>
    <h1>IndexedDB</h1>
    <div class="content">
        <div id="indexeddb-list">
    </div>
    <script type="module" src="indexeddb_internals.js"></script>
</body>
</html>
